<template>
  <div class="cssa">
    <div class="title">
      <div class="title-content">
        <div class="title-text">关于我们</div>
      </div>
    </div>
    <div v-if="content" class="content" v-html="content"></div>
  </div>
</template>
<script>
export default {
  auth: false,
  data() {
    return {
      content: "",
    };
  },
  created() {
    this.getContent();
  },
  mounted() {
    // 確保頁面加載時滾動到頂部
    this.scrollToTop();
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.$nextTick(() => {
        vm.scrollToTop();
      });
    });
  },
  head() {
    return {
      title: "关于我们",
    };
  },
  methods: {
    getContent() {
      let that = this;
      that.$axios.get("/get_agreement/7").then((res) => {
        this.content = res.data.content;
      });
    },
    scrollToTop() {
      // 滾動到頁面頂部
      window.scrollTo({
        top: 0,
        left: 0,
        behavior: "smooth",
      });
      // 備用方案，確保在所有瀏覽器中都能工作
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
    },
  },
};
</script>

<style lang="scss" scoped>
.cssa {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding-top: 80px;

  .title {
    width: 100%;
    height: 230px;
    background: url("~assets/images/about-us-banner.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .title-content {
      width: 518px;
      height: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 400;
      font-size: 15px;
      color: $pure-white;
      line-height: 15px;
      background-image: url("~assets/images/about-us-bg.png");
      background-size: 100% 100%;
      background-position: center;

      .title-text {
        font-weight: 600;
        font-size: 30px;
        color: $pure-white;
        line-height: 30px;
      }
    }
  }

  .content {
    width: 1200px;
    max-width: 1200px;
    background-color: $pure-white;
    padding: 40px;
    margin: 20px 0 40px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    // 美化動態內容的樣式
    :deep(h1),
    :deep(h2),
    :deep(h3),
    :deep(h4),
    :deep(h5),
    :deep(h6) {
      color: $ivory;
      margin: 24px 0 16px 0;
      font-weight: 600;
      line-height: 1.4;
    }

    :deep(h1) {
      font-size: 28px;
      border-bottom: 2px solid $light-gray;
      padding-bottom: 12px;
    }

    :deep(h2) {
      font-size: 24px;
      color: $ivory;
    }

    :deep(h3) {
      font-size: 20px;
      color: $ivory;
    }

    :deep(p) {
      color: $ivory;
      line-height: 1.8;
      margin: 16px 0;
      font-size: 14px;
      text-align: justify;
    }

    :deep(ul),
    :deep(ol) {
      margin: 16px 0;
      padding-left: 24px;

      li {
        color: $ivory;
        line-height: 1.8;
        margin: 8px 0;
        font-size: 14px;
      }
    }

    :deep(strong),
    :deep(b) {
      color: $ivory;
      font-weight: 600;
    }

    :deep(a) {
      color: $sapphire;
      text-decoration: none;
      transition: color 0.3s ease;

      &:hover {
        color: $sapphire;
        text-decoration: underline;
      }
    }

    :deep(blockquote) {
      background-color: $ivory;
      border-left: 4px solid $sapphire;
      padding: 16px 20px;
      margin: 20px 0;
      color: $obsidian;
      font-style: italic;
    }

    :deep(table) {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;

      th,
      td {
        border: 1px solid $ivory;
        padding: 12px 16px;
        text-align: left;
        font-size: 14px;
      }

      th {
        background-color: $ivory;
        font-weight: 600;
        color: $obsidian;
      }

      td {
        color: $obsidian;
      }

      tr:nth-child(even) {
        background-color: $ivory;
      }
    }

    :deep(code) {
      background-color: $ivory;
      padding: 2px 6px;
      font-family: "Courier New", monospace;
      font-size: 13px;
      color: $gold-accent;
    }

    :deep(pre) {
      background-color: $ivory;
      padding: 16px;
      overflow-x: auto;
      margin: 16px 0;

      code {
        background: none;
        padding: 0;
        color: $obsidian;
      }
    }

    :deep(hr) {
      border: none;
      height: 1px;
      background-color: $ivory;
      margin: 32px 0;
    }

    :deep(img) {
      max-width: 100%;
      height: auto;
      margin: 16px 0;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    // 響應式設計
    @media (max-width: 1200px) {
      width: 95%;
      padding: 30px;
    }

    @media (max-width: 768px) {
      padding: 20px;

      :deep(h1) {
        font-size: 24px;
      }

      :deep(h2) {
        font-size: 20px;
      }

      :deep(h3) {
        font-size: 18px;
      }
    }
  }
}
</style>
